<template>
  <div class="public-box left-box">
    <p class="public-tit">重点关注企业标签占比</p>
    <!-- 卡包统计 -->
    <div id="statisticalChart" class="statistical-chart" style="width: 100%;height: calc(100% - 60px)"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { stt } from '@/models/screen'

export default {
  name: 'LeftBot',
  data() {
    return {
      trafficWay: [],
      areaCode:''
    }
  },
  mounted() {
    this.init(this.areaCode)
  },
  methods: {
    async init(areaCode) {
      const { data } = await stt.getScreenStatisticsEnterpriseTag(areaCode)
      this.setChart(data)
    },
    setChart(data) {

      const setpie = echarts.init(document.getElementById('statisticalChart'))
      var img = ''
      var trafficWayData = []
      var color = ['#FF9B5E', '#FFE000', '#C83EF1', '#DC5B19', '#48F3E3', '#13A77E', '#EC4444', '#19DC7C', '#1D84FF', '#6D44F8']
      for (var i = 0; i < data.length; i++) {
        trafficWayData.push(
          {
            value: data[i].count,
            name: data[i].title,
            itemStyle: {
              normal: {
                borderWidth: 0,
                shadowBlur: 15,
                borderColor: color[i],
                shadowColor: color[i],
                borderRadius: 15
              }
            }
          },
          {
            value: 60,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          })
      }

      const objData = array2obj(trafficWayData, 'name')

      function array2obj(array, key) {
        var resObj = {}
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i]
        }
        return resObj
      }

      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [156, 172],
        center: ['50%', '50%'],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          }
        },
        data: trafficWayData,
      }]

      setpie.setOption({
        // backgroundColor: '#0A2E5D',
        color: color,
        title: {
          text: '企业标签',
          top: 'center',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            fontFamily: 'TencentSans',
            color: '#E8FEFF',
            fontSize: 37,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 265,
              height: 265
            },
            left: 'center',
            top: 'center'
          }]
        },
        tooltip: {
          show: false
        },
        legend: [
          {
            icon: 'circle',
            orient: 'vertical',
            top: 130,
            left: 47,
            padding: [0, 5],
            itemGap: 55,
            itemWidth: 30,
            itemHeight: 18,
            data: ['规上企业', '研发总部', '上市企业', '高新技术企业', '智能工厂'],
            formatter: function(name) {
              console.log(name)
              return '{value|' + (objData[name].value) + '} {title|' + name + '}'
            },
            textStyle: {
              rich: {
                title: {
                  fontSize: 26,
                  color: 'rgba(255, 255, 255, 0.8)',
                  padding: [0, 10]
                },
                value: {
                  fontSize: 26,
                  color: '#fft'
                }
              }
            }
          },
          {
            icon: 'circle',
            orient: 'vertical',
            top: 130,
            right: 47,
            padding: [0, 5],
            itemGap: 55,
            itemWidth: 9,
            itemHeight: 9,
            data: ['示范智能车间', '瞪羚企业', '专精特新企业', '科技型中小型', '其他'],
            align: 'left',
            formatter: function(name) {
              return '{value|' + (objData[name].value) + '} {title|' + name + '}'
            },
            textStyle: {
              rich: {
                title: {
                  fontSize: 26,
                  color: 'rgba(255, 255, 255, 0.8)',
                  padding: [0, 10]
                },
                value: {
                  fontSize: 26,
                  color: '#fft'
                }
              }
            }
          }],
        toolbox: {
          show: false
        },
        series: seriesOption
      })
    }
  }
}
</script>

<style scoped lang="less">
.left-box {
  padding-right: 50px;
  box-sizing: border-box;
}

.statistical-chart {

}
</style>
